<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside width="200px">
      <el-scrollbar class="menu-scroll">
        <el-menu :default-openeds="['1']">
          <el-sub-menu index="1" v-for="(item, indexM) in getMenuList" :key="indexM">
            <template #title>
              <el-icon><setting color="#fff" /></el-icon
              ><span style="color: #fff">{{ item.name }}</span>
            </template>

            <template v-for="(itemC, indexC) in item.children" :key="indexC">
              <el-menu-item
                :class="[currentIndex == itemC.code ? 'is-active' : '']"
                :index="itemC.code"
                @click="clickSysItem(itemC.code)"
              >
                {{ itemC.name }}
              </el-menu-item>
            </template>
            <!-- </el-menu-item-group> -->
          </el-sub-menu>

          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><setting color="#fff" /></el-icon><span style="color: #fff">系统设置</span>
            </template> -->

          <!-- <el-menu-item-group>


              <template v-for="(item, indexM) in getMenuList">
                <el-menu-item
                  v-if="item.pid > 0"
                  :key="indexM"
                  :class="[currentIndex == item.code ? 'is-active' : '']"
                  :index="item.code"
                  @click="clickSysItem(item.code)"
                >
                  {{ item.name }}
                </el-menu-item>
              </template> -->

          <!-- <el-menu-item
                :class="[currentIndex == 1 ? 'is-active' : '']"
                index="1-1"
                @click="clickSysItem(1)"
                >用户管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 2 ? 'is-active' : '']"
                index="1-2"
                @click="clickSysItem(2)"
                >组织管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 3 ? 'is-active' : '']"
                index="1-3"
                @click="clickSysItem(3)"
                >角色管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 4 ? 'is-active' : '']"
                index="1-4"
                @click="clickSysItem(4)"
                >日志管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 5 ? 'is-active' : '']"
                index="1-5"
                @click="clickSysItem(5)"
                >数据源管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 6 ? 'is-active' : '']"
                index="1-6"
                @click="clickSysItem(6)"
                >菜单管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 7 ? 'is-active' : '']"
                index="1-7"
                @click="clickSysItem(7)"
                >个人设置</el-menu-item
              > -->

          <!-- </el-menu-item-group> -->

          <!-- <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu> -->

          <!-- </el-sub-menu> -->

          <!-- <el-sub-menu index="2">
            <template #title>
              <el-icon><DataLine color="#fff" /></el-icon
              ><span style="color: #fff">数据源管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :class="[currentIndex == 5 ? 'is-active' : '']"
                index="2-1"
                @click="clickSysItem(5)"
                >数据源管理</el-menu-item
              >
              <el-menu-item
                :class="[currentIndex == 6 ? 'is-active' : '']"
                index="2-2"
                @click="clickSysItem(6)"
                >数据导入</el-menu-item
              >
            </el-menu-item-group>
           
          </el-sub-menu> -->
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px" class="flex_between">
        <span>
          {{
            currentIndex == '1001'
              ? '用户管理'
              : currentIndex == '1002'
              ? '组织管理'
              : currentIndex == '1003'
              ? '角色管理'
              : currentIndex == '1004'
              ? '日志管理'
              : currentIndex == '1005'
              ? '数据源管理'
              : currentIndex == '1006'
              ? '菜单管理'
              : '个人设置'
          }}
        </span>
        <div class="toolbar">
          <el-button link type="primary" size="small" @click="goHome('home')"> 回到首页 </el-button>
          <el-divider direction="vertical" />
          <el-button link type="primary" size="small" @click="loginOutFun()"> 退出登录 </el-button>
          <el-divider direction="vertical" />
          <!-- <el-dropdown>
           
            <el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon>
  
          
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goHome('home')">回到首页</el-dropdown-item>
                <el-dropdown-item @click="loginOutFun()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
          <span>{{ userInfo.nickname }}</span>
        </div>
      </el-header>

      <el-main>
        <div class="main-ctn">
          <system-user v-if="currentIndex == '1001'" />

          <system-menu v-if="currentIndex == '1002'" />

          <system-role v-if="currentIndex == '1003'" />

          <system-log v-if="currentIndex == '1004'" />

          <data-source v-if="currentIndex == '1005'" />

          <menu-manage v-if="currentIndex == '1006'" />

          <user-setting v-if="currentIndex == '1007'" />
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script >
import { ref, defineComponent, reactive, computed, onMounted, toRefs, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Storage } from '@/utils/Storage';
import { getUrlHashParams } from '@/utils/index.ts';
import systemUser from '@/views/system/permission/user/index.vue';
import userSetting from '@/views/system/permission/user/setting.vue';
import systemMenu from '@/views/system/permission/menu/index.vue';
import menuManage from '@/views/system/permission/menu/menuManage.vue';
import systemRole from '@/views/system/permission/role/index.vue';
import systemLog from '@/views/system/permission/log/index.vue';
import dataSource from '@/views/system/permission/datasoure/index.vue';
import { loginOut } from '@/api/system/user/index.ts';
import conf from "@/config/index.js"
const userInfo = JSON.parse(Storage.get('USERINFO'));
const url_prams = getUrlHashParams();
console.log('getMenuList', JSON.parse(Storage.get('MENULIST')));
let menuListData = JSON.parse(Storage.get('MENULIST'));
export default defineComponent({
  components: {
    systemUser,
    systemMenu,
    menuManage,
    systemRole,
    systemLog,
    dataSource,
    userSetting,
  },
  setup() {
    const state = reactive({
      currentIndex: (menuListData[0]?.children && menuListData[0]?.children[0]?.code) || '1007',
      userInfo: userInfo,
      getMenuList: menuListData,
    });
    const goHome = () => {
      //本地调试
      //   window.open('/');
      //线上环境
      window.open(conf.HOME_URL);
    };
    const loginOutFun = () => {
      loginOut();
      //   return
      setTimeout(() => {
        Storage.clear();
        //本地调试
        //   window.location.href = '/'
        //线上环境
        window.location.href = conf.LOGIN_URL
        window.location.reload();
      }, 500);
    };
    const clickSysItem = (currentIndex) => {
      document.title =
        currentIndex == '1001'
          ? '用户管理'
          : currentIndex == '1002'
          ? '组织管理'
          : currentIndex == '1003'
          ? '角色管理'
          : currentIndex == '1004'
          ? '日志管理'
          : currentIndex == '1005'
          ? '数据源管理'
          : currentIndex == '1006'
          ? '菜单管理'
          : currentIndex == '1007'
          ? '个人设置'
          : '';
      state.currentIndex = currentIndex;
    };
    onMounted(() => {
      nextTick(() => {
        if (url_prams.origin == 2) {
          setTimeout(() => {
            clickSysItem('1007');
          }, 300);
        } else if (url_prams.origin == 1) {
          setTimeout(() => {
            clickSysItem('1005');
          }, 300);
        }
      });
    });
    return {
      ...toRefs(state),
      clickSysItem,
      goHome,
      loginOutFun,
    };
  },
});
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: #fff;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}
.layout-container-demo .el-aside {
  /* color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8); */
  color: #fff;
  background: #001529;
  height: 100%;
}
.menu-scroll {
  background: #001529;
  color: #fff;
}

.layout-container-demo .el-menu {
  border-right: none;
  background: #001529;
  color: #fff;
}
.layout-container-demo .el-menu .el-menu-item {
  background: #001529;
  color: #fff;
}
.layout-container-demo .el-menu .is-active {
  color: #409eff;
}
.el-menu-item-group {
  background: #001529;
}
:deep(.el-sub-menu__title) {
  background: #053669;
}
:deep(.el-sub-menu__title:hover) {
  background: #333;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.main-ctn {
  padding: 0 10px;
}
</style>

